<script setup lang="ts">
import { NAvatar } from 'naive-ui'
import type {UserVO} from "@/types/vo/UserVO";

const { contacts, currentContactId, loading } = defineProps<{
  contacts: UserVO[]
  currentContactId: number | undefined
  loading: boolean
}>()


</script>
<template>
  <div class="sidebar overflow-y-auto" v-if="!loading">
    <div class="contact-list">
      <div
        v-for="contact in contacts"
        :key="contact.id"
        class="contact-item"
        :class="{ active: currentContactId === contact.id }"
        @click="$emit('select-contact', contact)"
      >
        <n-avatar round size="large" :src="contact.avatar">
        </n-avatar>
        <div class="contact-name">{{ contact.nickName }}</div>
        <n-badge :value="contact.unreadMessageCount" :max="99" :offset="[6, -8]" class="ml-auto"  />
      </div>
    </div>
  </div>
  <n-skeleton text :repeat="20" v-else />
</template>



<style scoped>
.sidebar {
  width: 280px;
  background-color: #edf2fc;
  border-right: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
}

.contact-list {
  flex-grow: 1;
  overflow-y: auto;
  padding-top: 12px;
}

.contact-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
}

.contact-item:hover {
  background-color: #e6eef9;
}

.contact-item.active {
  background-color: #e6eef9;
}

.contact-name {
  margin-left: 12px;
  font-size: 16px;
}
</style>
